<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
  <link rel="stylesheet" href="/videoWeb/element/element.css">
  <script src="/videoWeb/js/Jquery.js" ></script>
  <script tsrc="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
  <script src="/videoWeb/js/vue.js"></script>
  <script src="/videoWeb/element/element.js"></script>
  <title>个人首页</title>
</head>

<body>
<div id="app">
  <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">
      <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
    </el-menu-item>
    <el-menu-item index="1">
      <a href="/videoWeb/fronts/index.html">
        <i class="el-icon-s-home"></i>主页
      </a>
    </el-menu-item>

    <el-menu-item style="float: right;" v-if="code != 100">
      <a href="">注册</a>
      /
      <a href="">登录</a>
    </el-menu-item>

    <el-submenu index="5" style="float: right;" v-if="code === 100">
      <template slot="title">
        <div class="demo-type" style="display:inline-block">
          <div>
            <el-avatar :src="imgSrc"></el-avatar>
          </div>
        </div>
      </template>
      <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
      <el-menu-item index="5-2">
        <a href="/videoWeb/fronts/myHead.html">
          <i class="el-icon-user"></i>
          个人中心
        </a>
      </el-menu-item>
      <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
    </el-submenu>

    <el-menu-item style="float: right;"><i class="el-icon-s-custom"></i></el-menu-item>

  </el-menu>

  <!-- 侧边栏 -->
  <el-row class="tac" style="width: 25%;">
    <el-col :span="12">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>创作中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><a href="/videoWeb/fronts/uploadVideo.html"><i class="el-icon-video-camera-solid"></i>视频投稿</a></el-menu-item>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>

        <el-menu-item index="4" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>

        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>

      </el-menu>
    </el-col>
  </el-row>

</div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
            urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                 ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            code:1,//登录状态
            name:"",//用户姓名
            imgSrc:"",//用户头像
            id:0,//用户id
        },
        mounted:function(){
            this.login();
        },
        methods:{
            isCollapse: true,
            login:function(){
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                        }
                        if(res.code == 401){
                            location.href="../../../../login";
                        }
                    }
                })
            },
            loginOut:function(){
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                      Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../login";
                    }
                })
            },
        },
    })
</script>

</html>
